<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="../../template/tagedu.xhtml">

    <ui:define name="title">
        <title><h:outputText value="TAG - Matrícula"/></title>
        <f:metadata>
            <f:viewParam name="personage" value="#{enrollment.personageID}"/>            
        </f:metadata>        
    </ui:define>

    <ui:define name="content">
        <f:event type="preRenderComponent" listener="#{enrollment.init()}"/>
        <h:outputText styleClass="enrollmentName" value="Matrícula - #{enrollment.personage.name}"/>
        <h:form id="enrollmentForm">
            <p:messages id="message"/>
            <h:panelGroup id="humanSearchResultGroup">
                <h:panelGroup style="width: 48%;float:left;margin-right: 30px">
                    <p:dataTable  id="humanTable" emptyMessage="Sem resultados" 
                                 rowKey="#{human.id}" paginator="true" rows="10" 
                                 selection="#{enrollment.human}" lazy="true"
                                 value="#{enrollment.possibleHumans}" var="human"
                                 paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                                 rowsPerPageTemplate="10">
                        <p:column selectionMode="single" />
                        <p:column rendered="false" >
                            <h:outputText value="#{human.id}"/>
                        </p:column>
                        <p:column>
                            <p:rowToggler/>
                        </p:column>
                        <p:column sortBy="#{human.name}"
                                  filterMatchMode="contains" 
                                  filterStyle="width: 200px; margin-top: 3px;"
                                  filterBy="name">
                            <f:facet name="header">
                                <h:outputText value="Nome"/>
                            </f:facet>
                            <h:outputText value="#{human.name}"/>
                        </p:column>
                        <p:rowExpansion>
                            <h:panelGrid columns="2" cellpadding="4">
                                <h:outputLabel value="Nascimento: " for="birthday"/>
                                <h:outputText value="#{human.birthday.time}" id="birthday">
                                    <f:convertDateTime pattern="dd/MM/yyyy"/>
                                </h:outputText>
                                <h:outputLabel value="Endereço: " for="address"/>
                                <h:outputText value="#{human.address.street.name}, #{human.address.number}.
                                              #{human.address.complement}. #{human.address.zipcode.city.name}/#{human.address.zipcode.city.state.name}" id="address"/>
                                <ui:repeat value="#{enrollment.personAdditionalInfo(human.id)}" var="addInfo">
                                    <h:outputLabel value="#{addInfo.additionalInfoType.acronym}: "/>
                                    <h:outputText value="#{addInfo.value}"/>
                                </ui:repeat>
                            </h:panelGrid>
                        </p:rowExpansion>
                    </p:dataTable>

                    <p:commandButton style="display: block;margin: 10px auto"
                                     value="Adicionar" ajax="true" process="@this, humanTable"
                                     update="enrollmentHumanList, message" action="#{enrollment.addHuman()}"/>
                </h:panelGroup>
                <p:dataTable style="width: 48%;float:left" id="enrollmentHumanList" value="#{enrollment.enrollmentHumanList}" var="human">
                    <f:facet name="header">
                        <h:outputText value="Atores"/>
                    </f:facet>
                    <p:column sortBy="#{human.name}">
                        <f:facet name="header">
                            <h:outputText value="Nome"/>
                        </f:facet>
                        <h:outputText value="#{human.name}"/>
                    </p:column>
                    <p:column style="width: 20px; text-align:center;">
                        <f:facet name="header">
                            <h:outputText value="Remover"/>
                        </f:facet>
                        <p:commandLink immediate="true"
                                       action="#{enrollment.removeHuman(human.id)}"
                                       process="@this, enrollmentHumanList" update="@form">
                            <p:graphicImage width="20px" height="20px" value="../../resources/images/remove.jpeg"/>
                        </p:commandLink>
                    </p:column>
                </p:dataTable>
            </h:panelGroup>
            <span style="display:block;clear:both"></span>
            <p:separator/>

            <h:panelGroup id="details">
                <div class="input-list">
                <h:outputLabel  class="label" for="organization" value="Série: "/>
                <p:selectOneMenu id="organization" value="#{enrollment.organizationID}">
                    <f:selectItems value="#{enrollment.organizationList}"/>
                    <p:ajax update="year unity" process="@this" listener="#{enrollment.loadYearList()}"/>
                </p:selectOneMenu>
                </div>
               <div class="input-list">
                <h:outputLabel  class="label" for="year" value="Ano: "/>
                <p:selectOneMenu id="year" value="#{enrollment.year}">
                    <f:selectItems value="#{enrollment.yearList}"/>
                    <p:ajax process="organization @this" update="unity" 
                            listener="#{enrollment.loadUnityList()}"/>
                </p:selectOneMenu>
               </div>
                <div class="input-list">
                <h:outputLabel class="label" for="unity" value="Unidade: "/>
                <p:selectOneMenu id="unity" value="#{enrollment.unityID}" required="true" requiredMessage="Campo Obrigatório">
                    <f:selectItems value="#{enrollment.unityList}"/>
                </p:selectOneMenu>
                </div>
            </h:panelGroup>
            <p:commandButton update="@form" 
                             action="#{enrollment.enroll()}" value="Matricular"/>
        </h:form>
    </ui:define>
</ui:composition>